import React from "react";
import { Flex, Carousel, Grid, WingBlank } from "antd-mobile";
import { API } from "../../utils/api";

import "./index.scss";
// 导入导航菜单图片
import Nav1 from "../../assets/images/nav-1.png";
import Nav2 from "../../assets/images/nav-2.png";
import Nav3 from "../../assets/images/nav-3.png";
import Nav4 from "../../assets/images/nav-4.png";
import { BASE_URL } from "../../utils/url";
// 导入搜索导航栏组件
import SearchHeader from "../../components/SearchHeader";
// 导入 utils 获取当前定位城市的方法
import { getCurrentCity } from "../../utils/index";
// 导航菜单数据
const navs = [
  {
    id: 1,
    img: Nav1,
    title: "整租",
    path: "/home/list",
  },
  {
    id: 2,
    img: Nav2,
    title: "合租",
    path: "/home/list",
  },
  {
    id: 3,
    img: Nav3,
    title: "地图找房",
    path: "/map",
  },
  {
    id: 4,
    img: Nav4,
    title: "去出租",
    path: "/rent/add",
  },
];

// 获取地理位置信息
navigator.geolocation.getCurrentPosition((position) => {
  console.log("当前位置信息:", position);
});
export default class Index extends React.Component {
  state = {
    // 轮播图状态数据
    swipers: [1, 2, 3],
    isSwiperLoaded: false,
    // 租房小组数据
    groups: [],
    // 最新咨询
    news: [],
    // 当前所在地区
    address: "北京",
  };

  // 获取轮播图数据
  async getSwipers() {
    const res = await API.get(`/home/swiper`);
    // 方法一
    // this.setState({
    //   swipers: res.data.body,
    // });
    // 方法二
    this.setState(() => {
      return {
        isSwiperLoaded: true,
        swipers: res.data.body,
      };
    });
  }
  // 获取租房小组数据
  async getGroups() {
    const res = await API.get(`/home/groups`, {
      params: { area: "AREA%7C88cff55c-aaa4-e2e0" },
    });
    this.setState({
      groups: res.data.body,
    });
  }
  // 获取咨询数据
  async getNews() {
    const res = await API.get(`/home/news`, {
      params: { area: "AREA%7C88cff55c-aaa4-e2e0" },
    });
    this.setState({
      news: res.data.body,
    });
  }
  // 渲染轮播图结构
  renderSwipers() {
    return this.state.swipers.map((item) => (
      <a
        key={item.id}
        href="#!"
        style={{
          display: "inline-block",
          width: "100%",
          height: 212,
        }}
      >
        <img
          src={`${BASE_URL + item.imgSrc}`}
          alt=""
          style={{ width: "100%", verticalAlign: "top" }}
        />
      </a>
    ));
  }

  // 渲染导航结构
  renderNavs() {
    return navs.map((item) => (
      <Flex.Item
        key={item.id}
        onClick={() => this.props.history.push(item.path)}
      >
        <img src={item.img} alt="" />
        <h2>{item.title}</h2>
      </Flex.Item>
    ));
  }
  // 渲染咨询结构
  renderNews() {
    return this.state.news.map((item) => (
      <div className="news-item" key={item.id}>
        <div className="imgwrap">
          <img className="img" src={`${BASE_URL + item.imgSrc}`} alt="" />
        </div>
        <Flex className="content" direction="column" justify="between">
          <h3 className="title">{item.title}</h3>
          <Flex className="info" justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ));
  }
  async componentDidMount() {
    this.getSwipers();
    this.getGroups();
    this.getNews();
    const curCity = await getCurrentCity();
    this.setState({
      address: curCity.label,
    });
  }
  render() {
    return (
      <div className="index">
        <div className="swiper">
          {this.state.isSwiperLoaded ? (
            // 轮播图
            <Carousel autoplay infinite>
              {this.renderSwipers()}
            </Carousel>
          ) : (
            ""
          )}
          {/* 搜索框 */}

          <SearchHeader cityName={this.state.address}></SearchHeader>
        </div>

        {/* 导航菜单 */}
        <Flex className="nav">{this.renderNavs()}</Flex>

        {/* 租房小组 */}
        <div className="group">
          <h3 className="group-title">
            租房小组
            <span className="more">更多</span>
          </h3>
          {/* 宫格组件 */}
          <Grid
            data={this.state.groups}
            columnNum={2}
            square={false}
            hasLine={false}
            renderItem={(item) => (
              <Flex className="group-item" justify="around">
                <div className="desc">
                  <p className="title">{item.title}</p>
                  <span className="info">{item.desc}</span>
                </div>
                <img src={`${BASE_URL + item.imgSrc}`} alt="" />
              </Flex>
            )}
          />
        </div>

        {/* 最新咨询 */}
        <div className="news">
          <h3 className="group-title">最新咨询</h3>
          <WingBlank size="md">{this.renderNews()}</WingBlank>
        </div>
      </div>
    );
  }
}
